<template>
  <div class="list-container">
    <!-- list header -->
    <div class="list-header">
      <div
        class="list-header-item"
        v-for="column in data.listColumns"
        :key="column.prop"
        :style="{ width: column.width }"
      >
        {{ column.label }}
      </div>
    </div>

    <div class="line"></div>

    <!-- list body -->
    <div class="list-body">
      <div class="list-body-item" v-for="item in data.listItems" :key="item.id">
        <div
          class="list-body-item-content"
          v-for="column in data.listColumns"
          :key="column.prop"
          :style="{ width: column.width }"
          :class="getLevelClass(item.level, column.prop)"
        >
          <template v-if="column.prop === 'level'">
            <div class="level-svg" :class="getLevelColor(item.level)">
              <WarnTriangleFilled />
            </div>
          </template>
          <template v-else>
            {{ item[column.prop as keyof IListRow] }}
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IListData, IListRow } from "@/stores/types";

defineOptions({
  name: "List",
});

defineProps<{
  data: IListData;
}>();

const getLevelColor = (level: string) => {
  if (level === "A") {
    return "color-red";
  }
  if (level === "B") {
    return "color-yellow";
  }
  return "";
};

const getLevelClass = (level: string, prop: string) => {
  if (level === "A" && prop === "level") {
    return "level-a";
  }
  if (level === "B" && prop === "level") {
    return "level-b";
  }
  if (level === "A" && prop !== "level") {
    return "level-a-bg";
  }
  if (level === "B" && prop !== "level") {
    return "level-b-bg";
  }
  return "";
};
</script>

<style scoped lang="scss">
.list-container {
  position: relative;
}

.list-header {
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.line {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba($primary-color, 0),
    rgba($primary-color, 0.35) 50%,
    rgba($primary-color, 0)
  );
}

.list-header-item {
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.list-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.list-body-item {
  display: flex;
  flex: 1;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.list-body-item-content {
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-a {
  background-image: url("./img/level-a.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.level-b {
  background-image: url("./img/level-b.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.level-a-bg {
  background-image: url("./img/level-a-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.level-b-bg {
  background-image: url("./img/level-b-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.level-svg {
  color: red;
  width: 14px;
  display: flex;
  align-items: center;
}

.color-red {
  color: red;
}

.color-yellow {
  color: yellow;
}
</style>
